<template>
  <div class="user-appointment">
    <h2>我的预约记录</h2>
    <el-table :data="appointments" style="width: 100%">
      <el-table-column prop="consultantId" label="咨询师ID" />
      <el-table-column prop="appointmentTime" label="预约时间" :formatter="formatTime" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-if="scope.row.status === '已预约'"
            type="danger"
            size="mini"
            @click="cancelAppointment(scope.row.id)"
          >取消预约</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getMyAppointments, cancelAppointment } from '@/api/appointment'

export default {
  name: 'UserAppointment',
  data() {
    return {
      appointments: []
    }
  },
  created() {
    console.log('UserAppointment created')
    this.loadAppointments()
  },
  methods: {
    formatTime(row) {
      const t = typeof row.appointmentTime === 'string'
        ? parseInt(row.appointmentTime)
        : row.appointmentTime;
      if (!t) return '';
      const date = new Date(t);
      return date.toLocaleString();
    },
    loadAppointments() {
      console.log('loadAppointments called')
      getMyAppointments().then(res => {
        this.appointments = res.data
      })
    },
    cancelAppointment(id) {
      this.$confirm('确定要取消该预约吗？', '提示', {
        type: 'warning'
      }).then(() => {
        cancelAppointment(id).then(() => {
          this.$message.success('取消成功')
          this.loadAppointments()
        })
      })
    }
  }
}
</script> 